<template>
  <div class="layout-container">
    <!--  头部导航栏-->
    <Header/>
<!--    <el-container>-->
<!--      <el-aside width="10%"></el-aside>-->
<!--      <el-main>-->
<!--&lt;!&ndash;        <div class="image-slider" @mousemove="handleMouseMove" @mouseleave="stopTracking">&ndash;&gt;-->

<!--          &lt;!&ndash;    <img src="">&ndash;&gt;-->

<!--          &lt;!&ndash;          <el-image v-for="url in urls" :key="url" :src="url" fit="fill"/>&ndash;&gt;-->
<!--          &lt;!&ndash;          <transition-group name="fade" mode="out-in">&ndash;&gt;-->
<!--          &lt;!&ndash;            <el-image class="slider-image" :src="urls[currentIndex]" fit="fill"/>&ndash;&gt;-->
<!--          &lt;!&ndash;            <img class="slider-image" :src="urls[currentIndex]"/>&ndash;&gt;-->
<!--          &lt;!&ndash;            <div class="divimg"></div>&ndash;&gt;-->
<!--          &lt;!&ndash;          </transition-group>&ndash;&gt;-->

<!--          <el-carousel motion-blur height="700px">-->
<!--            <el-carousel-item v-for="url in urls" :key="url" >-->
<!--              <el-image :src="url" fit="fill"/>-->
<!--            </el-carousel-item>-->
<!--          </el-carousel>-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--      </el-main>-->
<!--      <el-aside width="10%"></el-aside>-->
<!--    </el-container>-->


    <el-container class="main-content">
      <el-aside width="10%"></el-aside>
      <!--    <el-main style="background-color: green;height: 500px;width:80%"></el-main>-->
      <router-view></router-view>
      <el-aside width="10%"></el-aside>
    </el-container>

    <!--  底部信息栏-->
<!--    <Footer/>-->
  </div>

</template>

<script setup>
import Header from '../components/Header.vue'

import Footer from '../components/Footer.vue'
import {ref} from "vue"




const urls = ref([
  'https://cdn.naccl.top/blog/img/bg3.jpg',
  'https://cdn.naccl.top/blog/img/bg1.jpg',
    'https://cdn.naccl.top/blog/blogHosting/2020/07/B01/first.jpg'
])

let lastX = 0;
let tracking = false;
const currentIndex = ref(0);

const handleMouseMove = (event) => {
  if (!tracking) {
    // 初始化跟踪状态，并获取初始鼠标X坐标
    tracking = true;
    lastX = event.clientX;
    return;
  }

  // 计算鼠标X坐标的变化量
  const deltaX = event.clientX - lastX;

  // 设置一个阈值，只有当鼠标移动超过这个阈值时才切换图片
  const threshold = 200;

  if (Math.abs(deltaX) > threshold) {
    // 根据鼠标移动的方向切换图片
    if (deltaX > 0) {
      // 向右移动
      currentIndex.value = (currentIndex.value + 1) % urls.value.length;
    } else {
      // 向左移动
      currentIndex.value = (currentIndex.value - 1 + urls.value.length) % urls.value.length;
    }

    // 更新最后的鼠标X坐标
    lastX = event.clientX;
  }
}

const stopTracking = () => {
  tracking = false;
}



</script>

<style scoped>
/*.layout-container {*/
/*  background-image: url("src/assets/images/BackgroundImg.png");*/
/*}*/
/*.main-content {*/
/*  flex: 1;*/
/*  display: flex;*/
/*}*/
.image-slider {
  position: relative;
  overflow: hidden; /* 防止图片因为尺寸问题而溢出容器 */
  width: 100%; /* 根据需要调整 */
  height: 100%; /* 根据需要调整 */
  /*cursor: pointer; !* 更改鼠标样式以表明可以拖动（尽管实际上是移动切换） *!*/
  /* 其他样式，如宽度、高度等 */
}

.slider-image {
  width: 100%; /* 根据需要调整 */
  height: 100%; /* 根据需要调整 */
  display: block; /* 确保图片不会内联显示 */
  transition: opacity 0.5s ease; /* 淡入淡出效果 */
}
/* 定义淡入淡出动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.divimg{
  background-image: url("https://cdn.naccl.top/blog/img/bg3.jpg");
  height: 1000px;
}

</style>